<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding: 0;
				list-style: none;
			}
			.head{
				width: 100%;
				height:50px;
				background: #C0C0C0;
			}
			table{
				width:800px;
				border: none;
				margin:20px auto;
			}
			table tr:first-child{
				height: 100px;
				text-align: center;
			}
			tr,th,button{
				border:none;
			}
			table button{
				width:120px;
				height:30px;
				background: #ccc;
			}
			.main{
				width: 500px;
				height:460px;
				background:rgba(000,000,000,0.1);
				position: absolute;
				left: 0;
				top:100px;
				bottom: 0;
				right: 0;
				margin: auto;
				display: none;
			}
			.main ul{
				width: 95%;
				text-align: center;
			}
			.main span{
				display: inline-block;
				text-align: center;
				width:80px;
			}
			.main li{
				height: 40px;
				line-height: 40px;
				font-size: 16px;
			}
			.main input{
				height: 20px;
				width: 180px;
				font-size: 16px;
			}
			.main div{
				width: 15px;
				height: 15px;
				background: #000;
				color: white;
				float: right;
				text-align: center;
				line-height: 10px;
				cursor: pointer;
			}
			.main li button{
				width: 80px;
				height:20px;
				background: #000000;
				color: white;
			}
			img{
				width: 50px;
				height: 50px;
			}
			.head input{
				width: 80px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-size: 16px;
				background: white;
				color: #000;
				float: right;
				margin-right: 30px;
				margin-top: 10px;
				border: none;	
			}
			.dl{
				width: 400px;
				height: 250px;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: #E0E0E0;
				display: none;
			}
			.dl p {
				text-align: center;
				color: #30C37C;
				height: 50px;
				font-size: 20px;
				line-height: 50px;
			}
			.dl ul{
				/*text-align: center;*/
				margin: auto;
			}
			.dl li{
				width:400px;
				height: 50px;
				text-align: center;
			}
			.dl input[type=text]{
				width: 180px;
				height: 30px;
			}
			.dl span{
				width: 50px;
				text-align: center;
				display: inline-block;
			}
			.dl input[type=button]{
				width: 80px;
				height: 30px;
				
			}.dl1{
				width: 400px;
				height: 250px;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: #E0E0E0;
				display: none;
			}
			.dl1 p {
				text-align: center;
				color: #30C37C;
				height: 50px;
				font-size: 20px;
				line-height: 50px;
			}
			.dl1 ul{
				/*text-align: center;*/
				margin: auto;
			}
			.dl1 li{
				width:400px;
				height: 50px;
				text-align: center;
			}
			.dl1 input[type=text]{
				width: 180px;
				height: 30px;
			}
			#psw{
				width: 180px;
				height: 30px;
			}
			.dl1 span{
				width: 50px;
				text-align: center;
				display: inline-block;
			}
			.dl1 input[type=button]{
				width: 80px;
				height: 30px;
				
			}
			.ID{
				display: none;
			}
			.head>p{
				float: right;
				margin-right:50px;
				margin-top:5px;
				display: none;
			}
			.head p img{
				width: 40px;
				height: 40px;
				border-radius:50%;
			}
			#sess{
				position: absolute;
				right:55px;
				top:60px;
				width:130px;
				height:130px;
				border:1px solid #000000;
				border-bottom-left-radius:10px;
				border-bottom-right-radius:10px;
				display:none;
			}
			#sess p{
				font-size:14px;
			}
			#sess h3{
				width:100%;
				height:25px;
				text-align:center;
			}
			#sess input{
				width:45px;
				height:26px;
				border:0;
				outline:none;
				background:white;
				border:1px solid #Ccc;
				border-radius:5px;
				text-align: center;
				position: absolute;
				bottom:5px;
				left:40px;
			}
			.main1{
				width: 500px;
				height:460px;
				background:rgba(000,000,000,0.1);
				position: absolute;
				left: 0;
				top:100px;
				bottom: 0;
				right: 0;
				margin: auto;
				display: none;
			}
			.main1 ul{
				width: 95%;
				text-align: center;
			}
			.main1 span{
				display: inline-block;
				text-align: center;
				width:80px;
			}
			.main1 li{
				height: 40px;
				line-height: 40px;
				font-size: 16px;
			}
			.main1 input{
				height: 20px;
				width: 180px;
				font-size: 16px;
			}
			.main1 div,.dl1 div,.dl div{
				width: 15px;
				height: 15px;
				background: #000;
				color: white;
				float: right;
				text-align: center;
				line-height: 10px;
				cursor: pointer;
			}
			.main1 li button{
				width: 80px;
				height:20px;
				background: #000000;
				color: white;
			}
			#trs{
				display: none;3r
			}
		</style>
	</head>
	<body>
		<div class="head">
			<input type="button" value="注册" id="zc">
			<input type="button" value="登录" id="btn"/>
			<p><img src="img/user.png"/></p>
			<div id="sess">
				<h3></h3>
				<input type="button" name="" id="zx" value="注销"/><span class="sp"></span>
			</div>
		</div>
		<div class="dl1">
			<div>
				x
			</div>
			<p>Halo</p>
			<ul>
				<li>
					<span>用户名</span><input type="text" placeholder="请输入正确的用户名" id="name1"/>
				</li>
				<li>
					<span>密码</span><input type="text" placeholder="请输入正确的密码" id="psw1"/>
				
				</li>
				<li><input type="button" name="" id="zccg" value="点击注册" /></li>
			</ul>
		</div>
		<div class="dl">
			<div>
				x
			</div>
			<p>Halo</p>
			<ul>
				<li>
					<span>用户名</span><input type="text" placeholder="请输入正确的用户名" id="name"/>
				</li>
				<li>
					<span>密码</span><input type="password" placeholder="请输入正确的密码" id="psw"/>
				
				</li>
				<li>
						<input type="checkbox" name="" id="" value="" id="chek"/>记住密码
				</li>
				<li><input type="button" name="" id="dl" value="登录" /></li>
			</ul>
		</div>
		<table border="" cellspacing="" cellpadding="" id="tab">
			<thead>
				<tr>
				<th colspan="7">
					<button id="tjsj">添加数据</button>
					<button id="sx">刷新</button>
				</th>
			</tr>
			<tr>
				<th>
					<input type="checkbox" />
				</th>
				<th>图书</th>
				<th>书名</th>
				<th>作者</th>
				<th>会员价</th>
				<th>出版社</th>
				<th>操作</th>
			</tr>
			
			</thead>
			
			<tbody id="tby">
				<tr id="trs">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</tbody>
		</table>
		<div class="main">
			<div>
				x
			</div>
			<ul id="kuang">
				<li><span>书名</span><input type="text" id="bookname" value="" ></li>
				<li><span>价格</span><input type="text" id="price" value="" ></li>
				<li><span>会员价</span><input type="text" id="hyPrice" value=""></li>
				<li><span>校园价</span><input type="text" id="xyPrcie" value=""></li>
				<li><span>作者</span><input type="text" id="author" value=""></li>
				<li><span>出版社</span><input type="text" id="publisher" value=""></li>
				<li><span>上架时间</span><input type="text" id="sjDate" value=""></li>
				<li><span>评分</span><input type="text" id="pf" value=""></li>
				<li><span>分类</span><input type="text" id="category" value=""></li>
				<li><span>图片</span><input type="text" id="pic" value=""></li>
				<li><button>添加</button></li>
			</ul>
		</div>
		<div class="main1">
			<div>
				x
			</div>
			<ul id="kuang1">
				<li><span>书名</span><input type="text" id="bookname1" value=""></li>
				<li><span>价格</span><input type="text" id="price1" value=""></li>
				<li><span>会员价</span><input type="text" id="hyPrice1" value=""></li>
				<li><span>校园价</span><input type="text" id="xyPrcie1" value=""></li>
				<li><span>作者</span><input type="text" id="author1" value=""></li>
				<li><span>出版社</span><input type="text" id="publisher1" value=""></li>
				<li><span>上架时间</span><input type="text" id="sjDate1" value=""></li>
				<li><span>评分</span><input type="text" id="pf1" value=""></li>
				<li><span>分类</span><input type="text" id="category1" value=""></li>
				<li><span>图片</span><input type="text" id="pic1" value=""></li>
				<li><button>添加</button></li>
			</ul>
		</div>
	</body>
	
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	//注册按钮
	$("#zc").click(function() {
		$(".dl1").show();
	})
	
	$(".dl div").click(function() {
		$(".dl").hide();
	})
	$(".dl1 div").click(function() {
		$(".dl1").hide();
	})
	//点击叉号 关闭添加书的页面;
	$(".main div").click(function() {
		$(".main").hide();
	})
	$(".main1 div").click(function() {
		$(".main1").hide();
	})
	//注册成功按钮
	$("#zccg").click(function() {
		var xinxi = {
			username: $("#name1").val(),
			password: $("#psw1").val()
		}
		$.post("http://localhost:0809/admin", xinxi, function(data) {
			if(data.username != "") {
				localStorage.setItem("name", data.username)
				localStorage.setItem("ID",data.id)
				alert("注册成功~快去登陆");
				$(".dl1").hide();
			}
		})
	})
	
	//登录按钮;登陆之后才可以点击添加书;
	$("#btn").click(function() {
		$(".dl").show();
	
		//登陆准备按钮;
		$("#dl").click(function() {
			$.ajax({
				url: "http://localhost:0809/admin/login",
				type: "POST",
				data: {
					username: $("#name").val(),
					password: $("#psw").val(),
				},
				success: function(data) {
					if(data.uid) {
						alert("登陆成功"),
						$("#btn").hide()
						$("#zc").hide()
						$(".dl").hide();
						$(".head p").show();
						hua();
					//登陆成功 添加后台信息
				$.get("http://localhost:809/books", function(data) {
					for(var i = 0; i < data.length; i++) {
						var ss = $("#trs").clone(true).removeAttr("id").appendTo($("tbody"));
						ss.children().eq(1).html("<img src=img/" + data[i].imgs + ".jpg/>");
						ss.children().eq(2).html(data[i].title);
						ss.children().eq(3).html(data[i].author);
						ss.children().eq(4).html(data[i].vipPrice);
						ss.children().eq(5).html(data[i].press);
						ss.children().eq(6).html("<button class='sc'>删除<span class='ID'>" + data[i].id + "</span></button><button class='xg'>修改</button>")
						bianji();//调用修改函数
						sc();//调用删除函数
					}
	
				})
//		}
						//显示书的页面
						$("#tjsj").click(function() {
							$(".main").show();
						})
						//添加按钮 把input信息添加在table
						$("#kuang button").click(function() {
							$(".dl").hide(); //登陆界面 删除 暂时写下
							if($("#kuang input").val() == "") {
								alert("信息不完整");
							} else {
								var obj = {
									title: $("#bookname").val(),
									price: $("#price").val(),
									vipPrice: $("#hyPrice").val(),
									schPrice: $("#xyPrcie").val(),
									author: $("#author").val(),
									press: $("#publisher").val(),
									dateIssued: $("#sjDate").val(),
									grade: 　$("#pf").val(),
									classify: $("#category").val(),
									imgs: $("#pic").val()
								}
								$.post("http://localhost:809/books", obj, function(data) {
									nr(data);//添加在table中的内容函数;
									$(".main").hide(); //添加之后盒子消失
									sc();	//删除函数
									bianji();//修改内容
								})
							}
						})
						$("button").eq(1).click(function() {
							$("tbody").children("tr:gt(0)").remove();
							$.get("http://localhost:809/books", function(data) {
							
								for(var i = 0; i < data.length; i++) {
									var ss = $("#trs").clone(true).removeAttr("id").appendTo($("tbody"));
									ss.children().eq(1).html("<img src=img/" + data[i].imgs + ".jpg/>");
									ss.children().eq(2).html(data[i].title);
									ss.children().eq(3).html(data[i].author);
									ss.children().eq(4).html(data[i].vipPrice);
									ss.children().eq(5).html(data[i].press);
									ss.children().eq(6).html("<button class='sc'>删除<span class='ID'>" + data[i].id + "</span></button><button class='xg'>修改</button>")
									bianji();//调用修改函数
									sc();//调用删除函数
								}
	
							})
						})
					}else{
						alert("用户不存在");
					}
				},
				error: function(xhr) {
					console.log(xhr.responseText)
				}
			});
	
		})
	
	})
//	添加内容函数:
	function nr(data){
		var Trs = $("#trs").clone(true).removeAttr("id").appendTo($("tbody"));
		
		Trs.children().eq(1).html("<img src=img/" + data.imgs + ".jpg/>");
		Trs.children().eq(2).html(data.title);
		Trs.children().eq(3).html(data.author);
		Trs.children().eq(4).html(data.vipPrice);
		Trs.children().eq(5).html(data.press);
		Trs.children().eq(6).html("<button class='sc'>删除<span class='ID'>" + data.id + "</span></button><button class='xg'>修改</button>")
	}
	//删除函数;
	function sc() {
		$(".sc").on("click",function(){
			$(this).parents("tr").remove()
			console.log($(this).children().html())
			$.ajax({
				url: "http://localhost:809/books/" + $(this).children().html(),
				type: "delete",
				success: function(data) {
					console.log(data)
				},
				error: function(data) {
					console.log(data)
				}
			})
		})
	}
	
	$("#zx").click(function() {
		$("#btn").show()
		$("#zc").show()
		$(".head p").hide();
		$("#sess h3").html("");
		localStorage.removeItem('name');
		$("#sess").hide();
		$.ajax({
			url: "http://localhost:0809/admin/"+localStorage.getItem("ID"),
			type: "delete",
			success: function(data) {
				console.log(data)
			},
			error: function(data) {
				console.log(data)
			}
		});
	})
	
	function hua(data) {
		$(".head p img").click(function() {
			$("#sess").show();
		})
		var names = localStorage.getItem("name")
		$("#sess h3").html("用户名:" + names)
	}	
	function bianji() {
		$(".xg").click(function() {
			$(".main1").show();
			
			$.ajax({
				type:"get",
				url:"http://localhost:0809/books/"+$(this).prev().children().html(),
				success : function(data){
					$("#bookname1").val(data.title),
					$("#price1").val(data.price),
					$("#hyPrice1").val(data.vipPrice),
					$("#xyPrcie1").val(data.schPrice),
					$("#author1").val(data.author),
					$("#publisher1").val(data.press),
					$("#sjDate1").val(data.dateIssued),
					$("#pf1").val(data.grade),
					$("#category1").val(data.classify),
					$("#pic1").val(data.imgs)
				},
				error:function(data){
					console.log(data)
				}
			});
			
			var that = this
			$("#kuang1 button").click(function() {
				var obj = {
						title: $("#bookname1").val(),
						price: $("#price1").val(),
						vipPrice: $("#hyPrice1").val(),
						schPrice: $("#xyPrcie1").val(),
						author: $("#author1").val(),
						press: $("#publisher1").val(),
						dateIssued: $("#sjDate1").val(),
						grade: 　$("#pf1").val(),
						classify: $("#category1").val(),
						imgs:$("#pic1").val(),
					}
				$.ajax({
					type:"put",
					url:"http://localhost:0809/books/"+$(that).prev().children().html(),
					data:obj,
					success:function(data){
						console.log(data)
							$(that).parents("tr").replaceWith($("<tr><th><input type='checkbox'/></th><th><img src=img/" + data.imgs + ".jpg/></th><th>" + data.title + "</th><th>" + data.author + "</th><th>" + data.vipPrice + "</th><th>" + data.press + "</th><th><button  class='sc'>删除<span class='ID'>" + data.id + "</span></button><button class='xg'>修改</button></th></tr>"));
							$(".main1").hide();
					},
				error:function(data){
					console.log(data)
				}
				});
			})
	})
}
	</script>
</html>